<template>
	<view class="u-page">
		<card title="基础功能">
			<u-notice-bar
			    :text="text1"
			></u-notice-bar>
		</card>
		<card title="可关闭">
			<u-notice-bar
			    :text="text5"
				mode="closable"
			></u-notice-bar>
		</card>
		<card title="自定义横向滚动速度">
			<u-notice-bar
			    :text="text2"
				speed="250"
				mode="closable"
			></u-notice-bar>
		</card>
		<card title="可跳转(点击右箭头)">
			<u-notice-bar
			    :text="text3"
				mode="link"
				url="/pages/componentsB/tag/tag"
			></u-notice-bar>
		</card>
		<card title="横向步进滚动">
			<u-notice-bar
			    :text="text4"
				:step="true"
				@click="click"
			></u-notice-bar>
		</card>
		<card title="纵向滚动">
			<u-notice-bar
			    :text="text4"
				direction="column"
				@click="click"
			></u-notice-bar>
		</card>
		<card title="自定义样式">
			<u-notice-bar
			    :text="text1"
				color="#ffffff"
				bgColor="#f56c6c"
			></u-notice-bar>
		</card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text1: 'uView UI众多组件覆盖开发过程的各个需求，组件功能丰富，多端兼容。让您快速集成，开箱即用',
				text2: 'uView UI众多的贴心小工具，是您开发过程中召之即来的利器，让您飞镖在手，百步穿杨',
				text3: 'uView UI收集众多的常用页面和布局，减少开发者的重复工作，让您专注逻辑，事半功倍',
				text4: [
					'寒雨连江夜入吴',
					'平明送客楚山孤',
					'洛阳亲友如相问',
					'一片冰心在玉壶'
				],
				text5: '涵盖uniapp各个方面，给开发者方向指导和设计理念，让您茅塞顿开，一马平川'
			}
		},
		onLoad() {
			
		},
		methods: {
			click(e) {
				console.log(e)
			}
		},
	}
</script>
